<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VIEW DATA</title>
<link rel="stylesheet" href="../../css/table_flot.css" type="text/css" media="screen" title="General Status" charset="utf-8">

<script language="javascript" type="text/javascript" src="../../script/flot/excanvas.js"></script>
<script src="../../script/jquery.js" language="javascript" type="text/javascript"></script>
<script src="../../script/flot/jquery.flot.js" language="javascript" type="text/javascript"></script>
<script src="../../script/flot/jquery.flot.crosshair.js" language="javascript" type="text/javascript"></script>
<script src="../../script/flot/jquery.flot.navigate.js" language="javascript" type="text/javascript"></script>

</head>
<body>
<div >
<p align="center">
<div id="placeholder"></div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
	var data1 = <?php echo $data1;?>;
	var data2 = <?php echo $data2;?>;
	$('#placeholder').css({
		height: '200px',
		width: '500px' });
	$.plot($('#placeholder'),[
			{ label: '<?php echo $graph_name1?>', data: data1 },
			{ label: '<?php echo $graph_name2?>', data: data2 },
			],{
	        lines: { show: true },
	        points: { show: false},
	        grid: { backgroundColor: '#fffaff' },
			crosshair: { mode: "xy" },
			grid: { hoverable: true, autoHighlight: true },
			yaxis: {min:0, autoscaleMargin: null},
			xaxis:{mode: "time",timeformat: "%m/%d %H:%M" }});
});
</script>
<p align="center" font-weight="bold"><?php echo $graph_name1?> VS. <?php echo $graph_name2?></p>
</p>

<p align="center">
<div id="placeholder"></div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
	var data3 = <?php echo $data3;?>;
	var data4 = <?php echo $data4;?>;
	$('#placeholder1').css({
		height: '200px',
		width: '500px' });
	$.plot($('#placeholder1'),[
			{ label: '<?php echo $graph_name3?>', data: data3 },
			{ label: '<?php echo $graph_name4?>', data: data4 },
			],{
	        lines: { show: true },
	        points: { show: false},
	        grid: { backgroundColor: '#fffaff' },
			crosshair: { mode: "xy" },
			grid: { hoverable: true, autoHighlight: true },
			yaxis: {min:0, autoscaleMargin: null},
			xaxis:{mode: "time",timeformat: "%m/%d %H:%M" }});
});
</script>
<p align="center" font-weight="bold"><?php echo $graph_name3?> VS. <?php echo $graph_name4?></p>
</p>
</div>

</body>
</html>
